import { Collapse, SideBar  } from 'antd-mobile'
import { itemType } from './type'

const LeftSlider = (props: {leftCollapse: never[], sliderBarClick: Function}) => {
  const list = () => {
    return props.leftCollapse.map((item: itemType) => {
       return (
        <Collapse.Panel key={item.id} title={item.name}>
          <SideBar>
            {item.children.map((itemB: itemType) => {
              return <SideBar.Item key={itemB.id}  title={<div onClick={() => props.sliderBarClick(itemB.id) }>{itemB.name}</div>} />
            })}
           </SideBar>
        </Collapse.Panel>
       )
    })
  }

  return (
    <>
      <Collapse accordion={true} >
        {list()}
      </Collapse>
    </>
  )
}

export default LeftSlider